﻿﻿<template>
    <el-card>
        <div v-if="key == this.routePath.defaultPath">
            <!-- 搜索 -->
            <el-form :inline="true" :model="searchForm">
                                <el-form-item label="">
                        <el-input placeholder="" v-model="searchForm.id"></el-input>
                    </el-form-item>
                                <el-form-item label="订单编号">
                        <el-input placeholder="订单编号" v-model="searchForm.orderCode"></el-input>
                    </el-form-item>
                                <el-form-item label="操作人编号">
                        <el-input placeholder="操作人编号" v-model="searchForm.operationCode"></el-input>
                    </el-form-item>
                                <el-form-item label="操作人名称">
                        <el-input placeholder="操作人名称" v-model="searchForm.operationName"></el-input>
                    </el-form-item>
                                <el-form-item label="操作内容">
                        <el-input placeholder="操作内容" v-model="searchForm.operationContent"></el-input>
                    </el-form-item>
                                <el-form-item label="订单状态">
                        <el-input placeholder="订单状态" v-model="searchForm.orderStatus"></el-input>
                    </el-form-item>
                                <el-form-item label="操作时间">
                        <el-input placeholder="操作时间" v-model="searchForm.operationTime"></el-input>
                    </el-form-item>
                                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch" >搜索</el-button>
                    <el-button class="filter-item" v-if="permission_add"  type="primary" icon="el-icon-plus"  @click="handleCreate" >新增</el-button>
                </el-form-item>
            </el-form>
            <!-- 列表 -->
            <el-table :data="dataList" height="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
                <el-table-column label="序号"  type="index" align="center" width="50"></el-table-column>
                                    <el-table-column label="" prop="id" align="center" width="120px"></el-table-column>
                                    <el-table-column label="订单编号" prop="orderCode" align="center" width="120px"></el-table-column>
                                    <el-table-column label="操作人编号" prop="operationCode" align="center" width="120px"></el-table-column>
                                    <el-table-column label="操作人名称" prop="operationName" align="center" width="120px"></el-table-column>
                                    <el-table-column label="操作内容" prop="operationContent" align="center" width="120px"></el-table-column>
                                    <el-table-column label="订单状态" prop="orderStatus" align="center" width="120px"></el-table-column>
                                    <el-table-column label="操作时间" prop="operationTime" align="center" width="120px"></el-table-column>
                                <el-table-column label="操作" align="center" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button v-if="permission_view"  type="text" size="small" @click="handleView(scope.row.id)">查看</el-button>
                        <el-button v-if="permission_edit"  type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
                        <el-button v-if="permission_delete" type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div v-show="!loading" class="pagination-container">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageForm.pageNum"
                        :page-sizes="pageForm.pageSizeSelect"
                        :page-size="pageForm.pageSize"
                        :total="pageForm.totalData"
                        layout="total, sizes, prev, pager, next, jumper"
                        :prev-text = "pageForm.prevText"
                        :next-text = "pageForm.nextText"
                >
                </el-pagination>
            </div>
        </div>
        <div v-else>
            <router-view :key="key"></router-view>
        </div>
    </el-card>
</template>

<script>
    import { mapGetters } from 'vuex'
    import { findOrderOperationRecordList  } from '@/api/admin/orderOperationRecord'
    export default{
        name: 'orderOperationRecord',
        data() {
            return {
                // 默认加载弹出层
                loading:true,
                //路由地址
                routePath:{
                    defaultPath: '/base/orderoperationrecord',
                    addPath: '/base/orderoperationrecord/add',
                    editPath: '/base/orderoperationrecord/edit',
                    viewPath: '/base/orderoperationrecord/view'
                },
                // 数据列表el-table
                dataList: [],
                // 权限按钮控制
                permission_add:false,
                permission_edit:false,
                permission_delete:false,
                permission_view:false,
                // 搜索条件
                searchForm:{
                                            id: '',
                                            orderCode: '',
                                            operationCode: '',
                                            operationName: '',
                                            operationContent: '',
                                            orderStatus: '',
                                            operationTime: '',
                                        pageNum: 1,
                    pageSize: 10
                },
                //分页相关
                pageForm:{
                    pageSizeSelect: [10,20,30,50],//每页显示个数选择器的选项设置
                    totalData: 0, //总条数
                    pageSize: 10, //每页显示条目个数
                    pageNum: 1 ,//当前页
                    prevText: '上一页', //替代图标显示的上一页文字
                    nextText: '下一页' //替代图标显示的下一页文字
                }
            }
        },
        computed:{
            key() {
                return this.$route.path
            },
            ...mapGetters([
                'elementList'
            ])
        },
        components:{
        },
        created(){
            if( this.$route.path === this.routePath.defaultPath){
                // 初始化获取数据列表
                this.getDateList()
                //初始化按钮权限
                this.permission_add = this.elementList['base:orderoperationrecord:add']
                this.permission_edit = this.elementList['base:orderoperationrecord:edit']
                this.permission_delete = this.elementList['base:orderoperationrecord:delete']
                this.permission_view = this.elementList['base:orderoperationrecord:detail']
            }
        },
        methods:{
            // 方法集合
            getDateList(){
                this.loading = true
                findMenuList(this.searchForm).then(res => {
                    console.log("请求成功打印日志",res)
                this.dataList = res.data.responseData
                this.pageForm.totalData = parseInt(res.data.total)
            })
                this.loading = false
            },
            handleView(val){
                this.$router.push({path:"this.routePath.viewPath",query:{id:val}});
            },
            handleEdit(val){
                this.$router.push({path:"this.routePath.editPath",query:{id:val}});
            },
            handleDelete(){

            },
            handleCreate(){
                this.$router.push({path:"this.routePath.addPath"});
            },
            handleSearch(){

            },
            handleSizeChange(val){
                this.searchForm.pageSize = val
                this.getDateList()
            },
            handleCurrentChange(val){
                this.searchForm.pageNum = val
                this.getDateList()
            }

        }
    }
</script>

